<template>
    <div>
        <el-tabs type="border-card" :value="pageObj.agreement" @tab-click="tabChangeFn">
            <el-tab-pane label="所有设备" name="all"></el-tab-pane>
            <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
            <el-tab-pane label="NB-loT"></el-tab-pane>
            <el-tab-pane label="4G/2G"></el-tab-pane>
            <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>
            <el-form ref="form" :model="pageObj" label-width="80px">
                <el-form-item label="EUI">
                    <el-input v-model="pageObj.eui"></el-input>
                </el-form-item>
                <el-form-item label="设备群组">
                    <el-select v-model="pageObj.devGroup" placeholder="设备群组">
                        <el-option label="全部" value="0"></el-option>
                        <el-option v-for="(item, index) in GounpOpt" :label="item" :value="item" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="在线状态">
                    <el-select v-model="pageObj.online" placeholder="在线状态">
                        <el-option v-for="(item, index) in option" :label="item.label" :value="item.value"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="绑定时间">
                    <el-date-picker v-model="dateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button-group>
                        <el-button size="small" type="primary" icon="el-icon-search" @click="searchFn">搜索</el-button>
                        <el-button size="small" type="primary" icon="el-icon-delete" @click="cleartFn">清除条件</el-button>
                        <el-button size="small" type="primary" icon="el-icon-refresh" @click="refreshFn">刷新</el-button>
                    </el-button-group>
                    <span class="tishi">共搜索到 {{ total }} 条</span>
                </el-form-item>
            </el-form>
        </el-tabs>
    </div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, onMounted } from 'vue';
import { useRouter } from "vue-router"
export default defineComponent({
    name: 'SensorForm',
    props: ['total', 'getData'],
    setup(props) {
        const Data = reactive({
            pageObj: {
                eui: '',
                online: 'all',
                agreement: 'all',
                date: [],
                devGroup: ''
            },
            dateArr:[],
            option: [
                { value: true, label: '在线' },
                { value: false, label: '离线' },
                { value: "all", label: '全部' }
            ],
            GounpOpt: ['济南农业基地', '菏泽农业基地', '潍坊农业基地', '威海农业基地', '泰安农业基地']
        })
        const router = useRouter();
        /* ========================== */
        onMounted(()=>{
            Updata()
        })
        // 计算属性  
        // 使用计算属性的值,需要  名称.value
        // 相当于ref定义的变量
        const dateStr = computed(() => {
            console.log(Data.pageObj.date);
            let d1 = Data.pageObj.date[0];
            let d2 = Data.pageObj.date[1];
            let time1 = d1 && d1.getTime();
            let time2 = d2 && d2.getTime();
            if (time1 && time2) {
                return time1 + '-' + time2;
            } else {
                return "";
            }
        })
        // 更新父组件
        const Updata = () => {
            if (Data.dateArr.length == 2) {
                let time1 = Data.dateArr[0].getTime()
                let time2 = Data.dateArr[1].getTime()
                let timeStr = time1 + '-' + time2
                Data.pageObj.date = timeStr
            }
            props.getData(Data.pageObj)
        }
        // 搜索
        const searchFn = () => {
            Updata()
        }
        // tab被选中时
        const tabChangeFn = (type) => {
            // this.pageObj.agreement = type.name
            Data.pageObj.agreement = type.props.name
            Updata()
        }
        // 清除条件
        const cleartFn = () => {
            Data.pageObj = {
                eui: '',
                online: 'all',
                agreement: 'all',
                date: ''
            }
            Data.dateArr = []
            Updata()
        }
        // 刷新
        const refreshFn = () => {
            router.go(0)
        }


        return { ...toRefs(Data), searchFn, tabChangeFn, cleartFn, refreshFn }
    }
    // data() {
    //     return {
    //         pageObj: {
    //             eui: '',
    //             online: 'all',
    //             agreement: 'all',
    //             date: [],
    //             devGroup: ''
    //         },
    //         dateArr: [],
    //         option: [
    //             { value: true, label: '在线' },
    //             { value: false, label: '离线' },
    //             { value: "all", label: '全部' }
    //         ],
    //         GounpOpt: ['济南农业基地', '菏泽农业基地', '潍坊农业基地', '威海农业基地', '泰安农业基地']
    //     };
    // },


    // methods: {
    //     // 更新父组件
    //     Updata() {
    //         if (this.dateArr.length) {
    //             let time1 = this.dateArr[0].getTime()
    //             let time2 = this.dateArr[1].getTime()
    //             let timeStr = time1 + '-' + time2
    //             this.pageObj.date = timeStr
    //         }
    //         this.$parent.pageObj = { ...this.pageObj }
    //         this.$parent.getData()
    //     },
    //     // 搜索
    //     searchFn() {
    //         this.Updata()
    //     },
    //     // tab被选中时
    //     tabChangeFn(type) {
    //         this.pageObj.agreement = type.name
    //         this.Updata()
    //     },
    //     // 清除条件
    //     cleartFn() {
    //         this.pageObj = {
    //             eui: '',
    //             online: 'all',
    //             agreement: 'all',
    //             date: ''
    //         }
    //         this.dateArr = []
    //         this.Updata()
    //     },
    //     // 刷新
    //     refreshFn() {
    //         this.$router.go(0)
    //     }
    // },
});
</script>

<style lang="less" scoped>
.el-form {
    width: 450px;
}
</style>